<template>
    <div>
        <div id="chart" style="width: 100%; height: 600px;"></div>
    </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { getHotspotData } from '@/api/responseStatistics/index.js'
require('echarts/theme/macarons') // echarts theme
export default {
    props: {
        rowData: {
            type: Object,
            default: {},
        },
        type: {
            type: String,
            default: '1',
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        init(data, data1) {
            // 获取容器元素
            var chartContainer = document.getElementById('chart');
            // 初始化图表实例
            var chart = echarts.init(chartContainer);
            var uploadedDataURL = 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=' + this.rowData.earthquakeQuickReportVO.provinceCode + '_full';
            axios.get(uploadedDataURL).then(function (geoJson) {
                console.log(geoJson)
                echarts.registerMap('GD', geoJson.data);
                let areaData = [];
                data.map(item => { // 扩大热力图效果
                    areaData.push(...new Array(3).fill(item));
                });
                let areaData1 = [];
                data1.map(item => { // 扩大热力图效果
                    areaData1.push(...new Array(3).fill(item));
                });
                console.log(areaData, 'areaData')
                let mapMax = Math.max(...data.map(item => item[2]));
                let mapMin = Math.min(...data.map(item => item[2]));
                console.log(mapMax, mapMin)
                chart.setOption({
                    // backgroundColor: '#ccc',
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    title: [{
                        text: '本地烈度',
                        textStyle: {
                            color: '#fff'
                        }
                    }, {
                        text: '设备烈度',
                        left: '50%',
                        textStyle: {
                            color: '#fff'
                        }
                    }],

                    visualMap: {
                        // type: 'piecewise',
                        bottom: 20,
                        left: '45%',
                        // show: false,
                        color: ['#FF0000', '#ff4601', '#fffc00', '#87cffa', '#cdcdcd'],
                        min: 0,
                        max: 12,
                        seriesIndex: [0, 1],
                        calculable: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    // grid: {
                    //     height: '100%',
                    //     width: '100%'
                    // },
                    geo: [{
                        map: 'GD',
                        label: {
                            show: true
                        },
                        top: 'center',
                        left: 0,

                        roam: false,
                        width: '45%',
                        height: '95%',
                        zoom: 0.9,
                        label: {
                            normal: {
                                show: true,
                                color: '#fff'
                            },
                            emphasis: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#76b1ff',
                                borderColor: '#eee',
                                shadowColor: '#76b1ff',
                                shadowBlur: 10,
                                borderWidth: 1
                            },
                            emphasis: {
                                // 鼠标移入颜色
                                areaColor: '#409EFF',
                                borderWidth: 0
                            }
                        }
                    }, {
                        map: 'GD',
                        label: {
                            show: true
                        },
                        top: 'center',
                        left: '55%',
                        // roam: true,
                        width: '45%',
                        height: '95%',
                        zoom: 0.9,
                        label: {
                            normal: {
                                show: true,
                                color: '#fff'
                            },
                            emphasis: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#76b1ff',
                                borderColor: '#eee',
                                shadowColor: '#76b1ff',
                                shadowBlur: 10,
                                borderWidth: 1
                            },
                            emphasis: {
                                // 鼠标移入颜色
                                areaColor: '#409EFF',
                                borderWidth: 0
                            }
                        }
                    }],

                    series: [{
                        mapType: 'GD',
                        top: 'center',
                        left: 'center',
                        width: '65%',
                        height: '95%',
                        name: 'AQI',
                        type: 'heatmap',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        blurSize: 40,
                        data: areaData,
                        // 鼠标移入
                        // emphasis: {
                        //     show: true,
                        //     itemStyle: {
                        //         areaColor: 'rgb(255,255,0,1)'
                        //     }
                        // }
                    },
                    {
                        mapType: 'GD',
                        top: 'center',
                        left: 'center',
                        width: '65%',
                        height: '95%',
                        name: 'AQI',
                        type: 'heatmap',
                        coordinateSystem: 'geo',
                        geoIndex: 1,
                        blurSize: 40,
                        data: areaData1,
                        // 鼠标移入
                        // emphasis: {
                        //     show: true,
                        //     itemStyle: {
                        //         areaColor: 'rgb(255,255,0,1)'
                        //     }
                        // }
                    }]
                })
            })
        },

        async getData() {
            const res = await getHotspotData(this.rowData.earthquakeQuickReportVO.eewId)
            let _data = []
            let _data1 = []
            if (res.code == 200) {

                for (var i = 0; i < res.data.length; i++) {
                    var item = res.data[i];
                    var longitude = item.longitude;
                    var latitude = item.latitude;
                    var intensity = parseFloat(item.localIntensity); // 转换为数字类型
                    var deviceIntensity = parseFloat(item.deviceIntensity); // 转换为数字类型
                    _data.push([longitude, latitude, intensity]);
                    _data1.push([longitude, latitude, deviceIntensity])
                }


                console.log(_data, 'getData')
                this.init(_data, _data1)
            }


        }
    }
}
</script>

<style></style>